<script setup name="myabsent">
import { useRouter } from 'vue-router';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';
import absentHttp from '@/api/absentHttp';
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus';
import timeFormat from '@/utils/timeFormat';

const router = useRouter()
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const absentFormRef = ref(null)
const responder_str = ref("")
const responder_email = ref("")
const absents = ref([])
const pagination = ref({
    total: 0,
    page: 1
})

const absentForm = ref({
    title: "",
    absent_type_id: null,
    date_range: [],
    request_content: ""
})
const rules = ref({
    title: [
        { required: true, message: "请输入标题", trigger: "blur" }
    ],
    absent_type_id: [
        { required: true, message: "请选择请假类型", trigger: "change" }
    ],
    date_range: [
        { required: true, type: 'array', message: "请选择请假时间", trigger: "blur" }
    ],
    request_content: [
        { required: true, message: "请输入请假事由", trigger: "blur" }
    ]
})

const absent_type = ref([])
const onSHowDialog = () => {
    absentForm.value.title = ""
    absentForm.value.absent_type_id = null
    absentForm.value.date_range = []
    absentForm.value.request_content = ""
    dialogFormVisible.value = true
}

const onSubmitAbsent = () => {
    absentFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            dialogFormVisible.value = false
            let data = {
                title: absentForm.value.title,
                absent_type_id: absentForm.value.absent_type_id,
                start_date: absentForm.value.date_range[0],
                end_date: absentForm.value.date_range[1],
                request_content: absentForm.value.request_content
            }
            try {
                let absent = await absentHttp.applyAbsent(data)
                absents.value.unshift(absent)
                ElMessage.success("发送成功")
            } catch (err) {
                ElMessage.error(err)
            }
        }
    })
}
const requestAbsent = async (page) => {
    try {
        let absents_data = await absentHttp.getMyAbsents(page)
        absents.value = absents_data.results
        pagination.value.total = absents_data.count
    } catch (err) {
        ElMessage.error(err)
    }
}

onMounted(async () => {
    try {
        absent_type.value = await absentHttp.getAbsentTypes()
        const { email = "", department: {intro = ""} = {}, realname = "" } = await absentHttp.getResponder()
        responder_str.value = email + '[' + intro + ']' + realname
        responder_email.value = email
        requestAbsent(1)
    } catch (err) {
        ElMessage.error(err.response?.data?.message || '请求失败')
    }
})

watch(() => pagination.value.page, (value) => {
    requestAbsent(value)
})
</script>


<template>
    <div>
        <OAMain title="个人考勤">
            <el-card class="box-card">
                <el-button type="success" plain @click="onSHowDialog"><el-icon>
                        <Plus />
                    </el-icon>发起考勤</el-button>
            </el-card>
            <el-table :data="absents" style="width: 100%" class="laoqin_list">
                <el-table-column label="创建时间">
                    <template #default="scope">
                        {{ timeFormat.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="requester.realname" label="请假人" />
                <el-table-column prop="absent_type.name" label="假期类型" />
                <el-table-column prop="request_content" label="请假原因" />
                <el-table-column prop="start_date" label="开始日期" />
                <el-table-column prop="end_date" label="结束日期" />
                <el-table-column label="审核领导">
                    {{ responder_email ? responder_str : '无leader' }}
                </el-table-column>
                <el-table-column prop="response_content" label="审批意见" />
                <el-table-column label="审批状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag type="success" v-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 3">已驳回</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </OAMain>
    </div>
    <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>

    <OADialog title="发起考勤" v-model="dialogFormVisible" @submit="onSubmitAbsent">
        <el-form :model="absentForm" :rules="rules" ref="absentFormRef">
            <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="absentForm.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="请假类型" :label-width="formLabelWidth" prop="absent_type_id">
                <el-select v-model="absentForm.absent_type_id" placeholder="请选择请假类型">
                    <el-option v-for="item in absent_type" :label="item.name" :value="item.id" :key="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="选择请假时间" :label-width="formLabelWidth" prop="date_range">
                <div class="block">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="absentForm.date_range" type="daterange"
                        range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期" />
                </div>
            </el-form-item>
            <el-form-item label="审批leader" :label-width="formLabelWidth">
                <el-input :value="responder_email ? responder_str : '无leader'" disabled autocomplete="off" />
            </el-form-item>
            <el-form-item label="请假理由" :label-width="formLabelWidth" prop="request_content">
                <el-input v-model="absentForm.request_content" :rows="10" type="textarea" placeholder="请输入请假事由" />
            </el-form-item>
        </el-form>
    </OADialog>
</template>

<style scoped>
.box-card {
    width: 100%;
    margin-top: 10px;
    text-align: right;
    border-radius: 10px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);
}

.laoqin_list {
    margin-top: 20px;
    border: 1px solid #fff;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}
</style>